<script setup lang="ts">
import { h } from "vue";
import { CopyOutlined, RotateRightOutlined } from "@ant-design/icons-vue";
import { TransferIndexProps } from "@/views/home/components/transferIndex/types.ts";
import { message } from "ant-design-vue";
import { useCopyToClipboard } from "@pureadmin/utils";

defineOptions({
	name: "HomeTransferIndexView",
});

const props = withDefaults(defineProps<TransferIndexProps>(), {
	index: undefined,
	disabled: () => false,
});
const { copied, update } = useCopyToClipboard();
const activeKey = ref<string>("1");
const { index, disabled } = toRefs(props);
const open = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);
const handleOk = () => {
	confirmLoading.value = true;
	setTimeout(() => {
		open.value = false;
		confirmLoading.value = false;
	}, 2000);
};
const handleCancel = () => {
	open.value = false;
};
const handleCopy = () => {
	update(index);
	if (copied.value) {
		message.success("复制成功");
	}
};
</script>

<template>
	<div class="home-transfer-index-view">
		<a-tooltip title="迁移索引" color="orange" placement="bottom">
			<a-button type="text" size="small" :icon="h(RotateRightOutlined)" shape="circle" :disabled="disabled" @click="open = true" />
		</a-tooltip>
		<a-modal
			v-model:open="open"
			title="迁移索引"
			:confirm-loading="confirmLoading"
			@ok="handleOk"
			@cancel="handleCancel"
			centered
			width="100%"
			wrap-class-name="full-modal home-add-index"
		>
			<div class="transfer-title">
				<span>源索引：{{ index }}</span>
				<a-button type="text" class="ml-1" size="small" @click="handleCopy" :icon="h(CopyOutlined)" />
			</div>
			<div class="transfer-body">
				<a-tabs v-model:activeKey="activeKey">
					<a-tab-pane key="1" tab="Reindex">Reindex</a-tab-pane>
					<a-tab-pane key="2" tab="Snapshot" force-render>暂不支持</a-tab-pane>
				</a-tabs>
			</div>
		</a-modal>
	</div>
</template>

<style scoped lang="scss">
.home-transfer-index-view {
}
.transfer-title {
	margin-top: 10px;
}
</style>
